import { Badge, Image } from '@nutui/nutui-react';
import { useNavigate } from 'react-router-dom';

import { ROUTE_MAP } from '@/application/constants/routerMap';
import { useGlobal } from '@/application/context/global';

import { useHome } from '../context';
export const Floating = () => {
  const navigate = useNavigate();
  const { unReceiveCount } = useGlobal();
  const { setShowTask, reachCardInfo } = useHome();
  return (
    <>
      <div
        className="fixed right-0 top-23.75 z-[99]"
        onClick={() => {
          navigate(ROUTE_MAP.AWARD_LIST);
        }}
      >
        <Image
          src={new URL('/images/home/btn_home_gift.png', import.meta.env.VITE_IMG_BASE_URL).href}
          className="h-10 w-12.25"
        />
        {unReceiveCount && unReceiveCount > 0 ? (
          <Badge value={unReceiveCount} className="z-2 !absolute top-1 " />
        ) : null}
      </div>
      <div
        className="fixed right-0 top-35.75 z-[99]"
        onClick={() => {
          if (reachCardInfo?.goodStock === false) {
            return;
          }
          setShowTask(true);
        }}
      >
        <Image
          src={new URL('/images/home/btn_home_task.png', import.meta.env.VITE_IMG_BASE_URL).href}
          className="h-10 w-12.25"
        />
      </div>
    </>
  );
};
